<template>
  <header>
    <div class="tophead">
      <div class="logo">
        <a href="/">XXXXX</a>
      </div>
      <nav class="topnav" id="topnav">
        <ul>
          <li v-for="(node,index) in nodes" :key="index">
            <router-link :to="{path:node.url}">
              {{node.name}}
            </router-link>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        // {
        //   name: "A",
        //   url: "/introduction"
        // },
        // {
        //   name: "B",
        //   url: "/list"
        // }
      ],
      isActive: false
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      this.$http({
        url: this.$http.adornUrl("/api/menu/list"),
        method: "GET",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.nodes = data.data;
        }
      });
    },
    changeBg(val) {
      this.isActive = true;
    }
  }
};
</script>

<style lang="scss">
.router-link-active {
  border-bottom-style: solid;
  border-width: 2px;
  padding-bottom: 8px;
}
</style>


